<template>
    <el-dialog
      :visible.sync="visible"
      style="max-height: 800px; overflow-y: auto"
      :close-on-click-modal="false"
      append-to-body
      @close="handleClose"
    >
      <div class="body">
        <div class="container" id="printContent">
          <div class="item_1-1">入库过磅单</div>
          <div class="item_1-2">
            <div id="qrcode-meitan"></div>
          </div>
          <div class="item_2-1">出厂日期:</div>
          <div class="item_2-2">2025/1/20</div>
          <div class="item_2-3">第3次打印</div>
          <div class="item_2-4">单据号:</div>
          <div class="item_2-5">4501112411</div>
          <div class="item_3-1">收货单位</div>
          <div class="item_3-2">齐齐哈尔龙江阜丰生物科技有限公司</div>
          <div class="item_3-3">车号</div>
          <div class="item_3-4">京A00000</div>
          <div class="item_4-1">发货单位</div>
          <div class="item_4-2">呼和浩特内蒙阜丰生物科技有限公司</div>
          <div class="item_x-1">货物名称</div>
          <div class="item_x-2">福瑞 谷氨酸钠</div>
          <div class="item_x-3">规格</div>
          <div class="item_x-4">1*25kg</div>
          <div class="item_x-5">毛重</div>
          <div class="item_x-6">23450kg</div>
          <div class="item_x-1">原始单号</div>
          <div class="item_x-2">4501112411</div>
          <div class="item_x-3">部门</div>
          <div class="item_x-4">信息部</div>
          <div class="item_x-5">皮重</div>
          <div class="item_x-6">23450kg</div>
          <div class="item_x-1">原始重量</div>
          <div class="item_x-2">23450kg</div>
          <div class="item_x-3">预置扣重</div>
          <div class="item_x-4">12340kg</div>
          <div class="item_x-5">净重</div>
          <div class="item_x-6">23450kg</div>
          <div class="item_x-1">净重大写</div>
          <div class="item_x-2">二三四五零千克</div>
          <div class = "item_xxx"></div>
          <!-- <div class="item_x-3">原发日期</div>
          <div class="item_x-4">2025/1/20</div> -->
          <div class="item_x-5">扣杂质</div>
          <div class="item_x-6">2340kg</div>
          <div class="item_x-1">SAP单号</div>
          <div class="item_x-2">4501112411</div>
          <div class="item_x-5">扣杂质</div>
          <div class="item_x-6">2340kg</div>
          <!-- <div class="item_x-3">原发矿</div>
          <div class="item_xx-1">呼伦贝尔东北阜丰生物科技有限公司</div> -->
          <div class="item_x-1">承运商</div>
          <div class="item_x-5">扣杂质</div>
          <div class="item_x-6">2340kg</div>
          <!-- <div class="item_x-2">111111</div>
          <div class="item_x-3">SAP备注</div> -->
          <!-- <div class="item_xx-1">1111111111111111</div> -->
          <div class="item_11-1">
            白：存根，蓝：结算，红：装卸费，黄：运费，绿：统计
          </div>
          <div class="item_11-2">2号磅称毛重,8号磅称皮重</div>
          <img src="../../../assets/logo/dongbeiZ.png" class="img" />
        </div>
      </div>
      <el-button type="primary" class="common-button" v-print="printOptions"
        >打印html</el-button
      >
    </el-dialog>
  </template>
  <script>
  import QRCode from "qrcodejs2";
  
  export default {
    components: {
      QRCode,
    },
    props: {
      formData: {},
    },
    data() {
      return {
        printOptions: {
          id: "printContent",
          popTitle: "打印文档",
          extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
          beforeOpenCallback() {
            console.log("打印窗口即将打开");
          },
          openCallback() {
            console.log("打印窗口已打开");
          },
          closeCallback() {
            console.log("打印窗口已关闭");
          },
        },
        form: {},
        visible: false,
      };
    },
    methods: {
      handleClose() {
        console.log("磅单 退出");
        this.visible = false;
      },
      code() {
        this.qrcode(80, 80, "DR2412030318", "canvas");
      },
  
      /**
       * @description 生成二维码
       * @param  {number} qWidth  宽度
       * @param  {number} qHeight  高度
       * @param  {string} qText  二维码内容（跳转连接）
       * @param  {string} qRender 渲染方式（有两种方式 table和canvas，默认是canvas）
       */
      qrcode(qWidth, qHeight, qText, qRender) {
        const container = document.getElementById("qrcode-meitan");
        container.innerHTML = "";
        console.log(container);
  
        // 生成二维码
        const code = new QRCode(container, {
          text: qText,
          width: qWidth,
          height: qHeight,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
      },
      // onWindowLoad() {
      //   console.log("二维码")
      //   this.$refs.qrcode.innerHTML = "";
      //   this.qrcode(124, 124, this.formData.czbh, "canvas");
      // },
      select() {
        console.log("meitan");
        this.visible = true;
        this.$nextTick(() => {
          this.code();
        });
      },
    },
  };
  </script>
  
    <style scoped>
  * {
    box-sizing: border-box;
  }
  .img {
    width: 140px;
    height: 80px;
    position: absolute;
    top: 202px;
    right: 0px;
    z-index: 999;
  }
  
  .wechat-group img {
    max-width: 220px;
    height: auto;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    width: 100%;
  }
  
  .container {
    z-index: 1;
    margin-top: 28px;
    margin-right: 28px;
    margin-bottom: 28px;
    margin-left: 28px;
    display: grid;
    height: 279px;
    width: 735px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    color: black;
    position: relative;
  }
  .container > * {
    display: grid;
    justify-items: center;
    align-items: center;
    margin-left: -1px;
    margin-top: -1px;
  }
  .item_1-1 {
    grid-column-start: 1;
    grid-column-end: 11;
    font-size: 12px;
    text-align: center;
    font-weight: 800;
  }
  .item_1-2 {
    display: grid;
    grid-column-start: 11;
    grid-column-end: 13;
    grid-row-start: 1;
    grid-row-end: 5;
    border: 1px solid black;
    /* justify-items: center;
    align-items: center; */
  }
  .item_xxx {
    grid-column-start: 7;
    grid-column-end: 10;
    grid-row-start: 8;
    grid-row-end: 11;
    border: 1px solid black;
  }
  .item_2-1 {
    grid-column-start: 1;
    grid-column-end: 2;
    font-size: 12px;
    text-align: left;
  }
  .item_2-2 {
    grid-column-start: 2;
    grid-column-end: 5;
    font-size: 12px;
    text-align: left;
  }
  .item_2-3 {
    grid-column-start: 5;
    grid-column-end: 8;
    font-size: 12px;
  }
  .item_2-4 {
    grid-column-start: 8;
    grid-column-end: 9;
    font-size: 12px;
    text-align: left;
  }
  .item_2-5 {
    grid-column-start: 9;
    grid-column-end: 11;
    font-size: 12px;
    text-align: left;
  }
  .item_3-1 {
    grid-column-start: 1;
    grid-column-end: 3;
    font-size: 12px;
    text-align: center;
    border: 1px solid black;
  }
  .item_3-2 {
    grid-column-start: 3;
    grid-column-end: 8;
    font-size: 12px;
    text-align: center;
    border: 1px solid black;
  }
  .item_3-3 {
    grid-column-start: 8;
    grid-column-end: 9;
    font-size: 12px;
    text-align: center;
    border: 1px solid black;
  }
  .item_3-4 {
    grid-column-start: 9;
    grid-column-end: 11;
    font-size: 12px;
    text-align: center;
    border: 1px solid black;
  }
  .item_4-1 {
    grid-column-start: 1;
    grid-column-end: 3;
    font-size: 12px;
    text-align: center;
    border: 1px solid black;
  }
  .item_4-2 {
    grid-column-start: 3;
    grid-column-end: 11;
    font-size: 12px;
    text-align: center;
    border: 1px solid black;
  }
  .item_x-1 {
    grid-column-start: 1;
    grid-column-end: 3;
    font-size: 12px;
    text-align: center;
    border: 1px solid black;
  }
  .item_x-2 {
    grid-column-start: 3;
    grid-column-end: 7;
    font-size: 12px;
    text-align: center;
    border: 1px solid black;
  }
  .item_x-3 {
    grid-column-start: 7;
    grid-column-end: 8;
    font-size: 12px;
    text-align: center;
    border: 1px solid black;
  }
  .item_x-4 {
    grid-column-start: 8;
    grid-column-end: 10;
    font-size: 12px;
    text-align: center;
    border: 1px solid black;
  }
  .item_x-5 {
    grid-column-start: 10;
    grid-column-end: 11;
    font-size: 12px;
    text-align: center;
    border: 1px solid black;
  }
  .item_x-6 {
    grid-column-start: 11;
    grid-column-end: 13;
    font-size: 12px;
    text-align: center;
    border: 1px solid black;
  }
  .item_xx-1 {
    grid-column-start: 8;
    grid-column-end: 13;
    font-size: 12px;
    text-align: center;
    border: 1px solid black;
  }
  .item_11-1 {
    grid-column-start: 1;
    grid-column-end: 7;
    font-size: 12px;
  }
  .item_11-2 {
    grid-column-start: 7;
    grid-column-end: 13;
    font-size: 12px;
  }
  .body {
    height: 400px;
    width: 800px;
    background-color: aliceblue;
  }
  </style>
    